<template>
  <el-row :gutter="10" class="dect-main">
    <el-col :span="7">
      <div class="grid-content bg-purple">
        <el-row class="titil">
          <el-col :span="24">
            <el-button size="mini" @click="addDict()">添加字典</el-button>
          </el-col>
        </el-row>
        <el-table
          :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          style="width: auto"
          border
          stripe
          size="small"
          highlight-current-row
          @row-click="selectRow"
        >
          <el-table-column align="left">
            <template slot="header">
              <el-input v-model="search" size="mini" placeholder="过滤字典" />
            </template>
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input
                  v-model="scope.row.name"
                  style="width:80%"
                  class="edit-input"
                  size="small"
                />
                <el-button class="cancel-btn" size="mini" @click="saveDict(scope.row)">保存</el-button>
              </template>
              <template v-if="!scope.row.edit">
                <i class="el-icon-edit" @click="scope.row.edit=!scope.row.edit" />
                <span>{{ scope.row.name+'('+scope.row.key+')' }}</span>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          :title="addOrEditForm.title"
          :visible.sync="addOrEditFormVisible"
          width="430px"
          @close="closeDialog('addOrEditForm')"
        >
          <el-form
            ref="addOrEditForm"
            label-width="90px"
            :model="addOrEditForm"
            size="small"
            :rules="rules"
          >
            <el-form-item label="字典key" prop="key">
              <el-input v-model="addOrEditForm.key" auto-complete="off" placeholder="请输入字典key" />
            </el-form-item>
            <el-form-item label="字典名称" prop="name">
              <el-input v-model="addOrEditForm.name" auto-complete="off" placeholder="请输入字典名称" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="closeDialog('addOrEditForm')">取消</el-button>
            <el-button
              size="small"
              type="primary"
              class="title"
              @click="submitForm('addOrEditForm')"
            >保存</el-button>
          </div>
        </el-dialog>
      </div>
    </el-col>
    <el-col :span="17">
      <div v-if="dictId" class="grid-content bg-purple">
        <el-row class="titil">
          <el-col :span="24">
            <el-button size="mini" @click="addDictValue()">添加键值</el-button>
          </el-col>
        </el-row>
        <el-table :data="dictValueList" border stripe size="small" style="width: auto;">
          <el-table-column align="left" label="内部参数名称" width="160px">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.name" class="edit-input" size="small" />
              </template>
              <template v-if="!scope.row.edit">
                <span>{{ scope.row.name }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column align="left" label="内部参数key" width="160px">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.key" class="edit-input" size="small" />
              </template>
              <template v-if="!scope.row.edit">
                <span>{{ scope.row.key }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column align="left" label="字典描述" show-overflow-tooltip>
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input
                  v-model="scope.row.remark"
                  type="textarea"
                  class="edit-input"
                  size="small"
                />
              </template>
              <template v-if="!scope.row.edit">
                <pre>{{ scope.row.remark }}</pre>
              </template>
            </template>
          </el-table-column>
          <el-table-column width="180" fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                v-if="!scope.row.edit"
                size="mini"
                style="padding: 3px 4px 3px 4px;margin: 1px"
                type="primary"
                @click="scope.row.edit=!scope.row.edit"
              >修改</el-button>
              <el-button
                v-if="scope.row.edit"
                size="mini"
                type="primary"
                style="padding: 3px 4px 3px 4px;margin: 1px"
                @click="saveDictValue(scope.row)"
              >保存</el-button>
              <el-button
                v-if="scope.row.id"
                style="padding: 3px 4px 3px 4px;margin: 1px"
                type="danger"
                size="mini"
                @click="deleteRow(scope.row)"
              >删除</el-button>
              <el-button
                v-if="!scope.row.id"
                style="padding: 3px 4px 3px 4px;margin: 1px"
                type="warning"
                size="mini"
                @click="cancelRow(scope.row)"
              >取消</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import { requestDictList, requestUpdateDict, requestAddDict, requestDictValueList, requestUpdateDictValue, requestAddDictValue } from '@/api/sys/dict'
export default {
  data() {
    return {
      addOrEditFormVisible: false,
      addOrEditForm: {
        title: '',
        id: '',
        name: '',
        key: ''
      }, // 新增或者删除弹出框默认值
      tableData: [],
      dictValueList: [],
      search: '',
      selectedDictIndex: '',
      dictId: '',
      rules: {
        key: [{ required: true, message: 'key不能为空', trigger: 'blur' }],
        name: [{ required: true, message: 'name不能为空', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getDictList()
  },
  methods: {
    cancelRow(row) { this.dictValueList.splice(row.$index, 1) },
    saveDictValue(row) {
      if (row.id) {
        row.dictId = this.dictId
        requestUpdateDictValue(row).then(data => {
          this.$message({
            type: 'success',
            message: '更新成功!'
          })
          this.getDictValueList()
        })
      } else {
        row.dictId = this.dictId
        requestAddDictValue(row).then(data => {
          this.$message({
            type: 'success',
            message: '新增成功!'
          })
          this.getDictValueList()
        })
      }
    },
    selectRow(row) {
      this.dictId = row.id
      this.selectedDictIndex = row.$index
      this.getDictValueList()
    },
    saveDict(row) {
      row.edit = false
      requestUpdateDict(row).then(data => {
        this.$message({
          type: 'success',
          message: '保存成功!'
        })
        this.getDictList()
      })
    },
    addDict() {
      this.addOrEditFormVisible = true
      this.addOrEditForm.title = '添加字典'
    },
    addDictValue() {
      const v = { edit: true }
      this.dictValueList.unshift(v)
    },
    submitForm(Visible) {
      this.$refs[Visible].validate((validate) => {
        if (validate && Visible === 'addOrEditForm') {
          // 新增
          requestAddDict(this.addOrEditForm).then(data => {
            this.addOrEditFormVisible = false
            this.getDictList()
            this.$message({
              type: 'success',
              message: '保存数据成功!'
            })
          })
        }
      })
    },
    closeDialog(Visible) {
      if (Visible === 'addOrEditForm') {
        this.$refs[Visible].resetFields()
        this.addOrEditFormVisible = false
        this.addOrEditForm = {}
      }
    },
    getDictList() {
      requestDictList().then((result) => {
        this.tableData = result.map(v => {
          v.edit = false
          return v
        })
      })
    },
    getDictValueList() {
      requestDictValueList(this.dictId).then((result) => {
        this.dictValueList = result.map(v => {
          v.edit = false
          return v
        })
      })
    }
  }
}
</script>

<style scoped>
.dect-main {
  padding: 20px 20px 20px 20px;
}
.titil {
  margin-bottom: 10px;
}
.el-table {
  border: 1px solid #dad7d7;
}

pre {
  margin: 0px;
}
</style>
